<include file="Public:header" />
<style>
table tbody tr{cursor:move;}
</style>
	<div class="container">
		<div class="page-header">
			<h4>{:L('SYSTEM_SETTINGS')}</h4>
		</div>
		<include file="Public:alert" />
		<ul class="nav nav-tabs">
			<li><a href="{:U('setting/defaultInfo')}">{:L('SYSTEM_BASIC_SETTINGS')}</a></li>
			<li><a href="{:U('setting/smtp')}">{:L('SMTP_SETTINGS')}</a></li>
			<li><a href="{:U('setting/fields')}">{:L('CUSTOMIZING_FIELDS_SETTING')}</a></li>		
			<li class="active"><a href="{:U('navigation/setting')}">{:L('SYSTEM_MENU_SETTINGS')}</a></li>
			<li><a href="{:U('setting/appsetting')}">APP接口配置</a></li>
		</ul>
		<form action="{:U('navigation/delete')}" method="post">
		<div class="row">
			<div class="span12">
				<div class="nav pull-left">
					<button type="submit" class="btn"><i class="icon-remove"></i>&nbsp;{:L('DELETE')}</button>&nbsp; <a id="sort_btn" class="btn"><i class=" icon-file"></i>&nbsp;{:L('SAVE_THE_LOCATION')}</a>
				</div>
				<div class="pull-right">
					<a class="btn btn-primary" id="add_navigation"><i class="icon-plus"></i>&nbsp; {:L('ADD_NAVIGATION_MENU')}</a>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="span4" id="postion_top">
				<h4>{:L('NAVIGATION_LOCATION_AT_THE_TOP')}</h4>
				<table class="table table-hover">
					<thead>
						<tr>
						   <th width="25%"><input class="check_all" type="checkbox" /> &nbsp; {:L('CHECK_ALL')}</th>
						   <th width="25%">{:L('MENU')}</th>
						   <th>{:L('LINK')}</th>						   
						</tr>
					</thead>
					<tbody>
						<empty name="postion.top">
						<tr><td colspan="3">{:L('THIS_POSITION_IS_NOT_TO_ADD_THE_MENU')}</td></tr>
						<else />
						<volist name = "postion.top" id="vo">
							<tr><td><input type="checkbox" class="list" name="list[]" value="{$vo.id}"/> &nbsp; 
								<a class="edit" href="javascript:void(0);" rel="{$vo.id}">{:L('EDITING')}</a>  &nbsp;
								</td>
								<td>{$vo.title}</td>
								<td><a href="{$vo.url}" target="_blank"><if condition="strlen($vo['url']) gt 25">{$vo.url|substr=0,25}...<else/>{$vo.url}</if></a></td>
							</tr>
						</volist>	
						</empty>
					</tbody>
				</table>
			</div>
			<div class="span4" id="postion_more">
				<h4>{:L('NAVIGATION_LOCATION_MORE')}</h4>
				<table class="table table-hover">
					<thead>
						<tr>
						   <th width="25%"><input class="check_all" type="checkbox" /> &nbsp; {:L('CHECK_ALL')}</th>
						   <th width="25%">{:L('MENU')}</th>
						   <th>{:L('LINK')}</th>						   
						</tr>
					</thead>
					<tbody>
						<empty name="postion.more">
						<tr><td colspan="3">{:L('THIS_POSITION_IS_NOT_TO_ADD_THE_MENU')}</td></tr>
						<else />
						<volist name = "postion.more" id="vo">
							<tr><td><input type="checkbox" class="list" name="list[]" value="{$vo.id}"/> &nbsp; 
								<a class="edit" href="javascript:void(0);" rel="{$vo.id}">{:L('EDITING')}</a>  &nbsp;
								</td>
								<td>{$vo.title}</td>
								<td><a href="{$vo.url}" target="_blank"><if condition="strlen($vo['url']) gt 25">{$vo.url|substr=0,25}...<else/>{$vo.url}</if></a></td>
							</tr>
						</volist>
						</empty>
					</tbody>
				</table>
			</div>
			<div class="span4" id="postion_user">
				<h4>{:L('NAVIGATION_LOCATION_PERSONAL_CENTER')}</h4>
				<table class="table table-hover">
					<thead>
						<tr>
						   <th width="25%"><input class="check_all" type="checkbox" /> &nbsp; {:L('CHECK_ALL')}</th>
						   <th width="25%">{:L('MENU')}</th>
						   <th>{:L('LINK')}</th>						   
						</tr>
					</thead>
					<tbody>
						<empty name="postion.user">
							<tr><td colspan="3">{:L('THIS_POSITION_IS_NOT_TO_ADD_THE_MENU')}</td></tr>
						<else />
						<volist name = "postion.user" id="vo">
							<tr><td><input type="checkbox" class="list" name="list[]" value="{$vo.id}"/> &nbsp; 
								<a class="edit" href="javascript:void(0);" rel="{$vo.id}">{:L('EDITING')}</a>  &nbsp;
								</td>
								<td>{$vo.title}</td>
								<td><a href="{$vo.url}" target="_blank"><if condition="strlen($vo['url']) gt 25">{$vo.url|substr=0,25}...<else/>{$vo.url}</if></a></td>
							</tr>
						</volist>
						</empty>
					</tbody>
				</table>
			</div>
			<div class="span12"><span style="color: rgb(243, 40, 12);">{:L('PROMPT')}</span></div>
		</div>
	</div>
<div id="dialog-message1" class="hide" title="{:L('ADD_MENU')}">loading...</div>
<div id="dialog-message2" class="hide" title="{:L('EDIT_MENU')}">loading...</div>
<script type="text/javascript">
	$(function(){
		$(".check_all").click(function(){
			$(this).parents("table").find("input[class='list']").prop('checked', $(this).prop("checked"));
		});

		$("#add_navigation").click(function(){
			$('#dialog-message1').dialog('open');
			$('#dialog-message1').load('{:U("navigation/add")}');
		});
		$("table tbody").sortable({connectWith: "table tbody"});
		$(".edit").click(
			function(){
				$('#dialog-message2').dialog('open');
				tid = $(this).attr('rel');
				$('#dialog-message2').load('{:U("navigation/edit","id=")}' + tid);
			}
		);
		$("#sort_btn").click(
			function() {
				postion_top = [];
				$.each($("#postion_top .list"), function(i, item){postion_top.push(item.value)});
				postion_user = [];
				$.each($("#postion_user .list"), function(i, item){postion_user.push(item.value)});
				postion_more = [];
				$.each($("#postion_more .list"), function(i, item){postion_more.push(item.value)});
				$.get('{:U("navigation/sort")}',{postion_top:postion_top.join(','), postion_user:postion_user.join(','), postion_more:postion_more.join(',')}, function(data){
					if (data.status == 1) {
						$(".page-header").after('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">×</button>' + data.info + '</div>');
					} else {
						$(".page-header").after('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">×</button>' + data.info + '</div>');
					}
				}, 'json');
			}		
		);
	});
	function deleteDepartment(id,name){
		var v = confirm({:L('SURE_TO_DELETE_THE_MENU')});
		if(v == true){
			window.location="{:U('navigation/delete','id=')}"+id;
		}
	}

	$('#dialog-message1').dialog({
		autoOpen: false,
		modal: true,
		width: 600,
		maxHeight: 400,
		position :["center",100]
	});
	$('#dialog-message2').dialog({
		autoOpen: false,
		modal: true,
		width: 600,
		maxHeight: 400,
		position :["center",100]
	});
</script>
<include file="Public:footer" />